<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="manifest" href="a3.webmanifest">
    <title>A3Class Conveyer</title>
  </head>
  <body>
    <link rel="stylesheet" href="css/main.css"/>
    <script src="js/Theme.js"></script>
    <!-- <script src="js/ammo.js/build/ammo.wasm.js"></script> -->
    <script src="js/ammo.js/build/ammo.js"></script>
    <div class="div-fullscreen"><div id="container"></div></div>
    <script type="module">
      import * as THREE from "./js/three.js/build/three.module.js";

      import A3Class from './js/A3Class.js';
      import A3Actor from './js/A3Actor.js';
      import A3BasicShape, { A3ObjectMaker, A3ObjectRecycler } from './js/A3BasicShape.js';
      import A3Terrain from './js/A3Terrain.js';
      
      import { A3HingeConstraint, A36DofConstraint, A3SlideConstraint } from './js/A3Constraint.js';
      import { ExCylinderGeometry } from './js/A3Geometrys.js';
      import { A3Ground } from './js/A3Static.js';
      import { A3Conveyer, A3RolerConveyer } from './js/A3Conveyers.js';
      import { VertexNormalsHelper } from './jsm/helpers/VertexNormalsHelper.js';

      const container = document.getElementById( 'container' );

      const a3 = new A3Class( container );

      await a3.initAmmo();
      a3.init();

      console.log( a3.AmmoLib );

      const pos = new THREE.Vector3();
      const quat = new THREE.Quaternion( 0, 0, 0, 1 );

      const ground = new A3Ground( 20, 20 );
      ground.loadTexture( 'textures/grid.png' );
      a3.addActor( ground );

      const conveyer = new A3Conveyer(.5, 2, 10);
      a3.addActor( conveyer );

      // pos.set( 0, .5, 0 );
      // conveyer.setPosition(pos);
      // conveyer.threeObject.position.copy(pos)
      // quat.setFromAxisAngle( new THREE.Vector3( 0, 1, 0 ), -Math.PI / 4 );
      // conveyer.setQuaternion( quat );
      // console.log( conveyer.physicsBody.setWorldTransform() )
      conveyer.setSpeed( 2 );


      // 物体生产器
      pos.set( 0, 3, -5 );
      const maker = new A3ObjectMaker( pos, 1 );
      maker.speed = 1;
      a3.addActor( maker );

      pos.set( 0, 1, 8 );
      const recycler = new A3ObjectRecycler( pos, 2 );
      a3.addActor( recycler );

      // const tbox = new A3BasicShape();
      // pos.set( 0, 10, 0 );
      // tbox.setPosition( pos );
      // tbox.setMass( 1 );
      // tbox.recyclable = true;
      // tbox.init();
      // a3.addActor( tbox );

      // 滚筒型

      pos.set( 3, 3, -5 );
      const maker2 = new A3ObjectMaker( pos, .5 );
      maker2.speed = 1;
      a3.addActor( maker2 );

      pos.set( 3, 1, 8 );
      const recycler2 = new A3ObjectRecycler( pos, 2 );
      a3.addActor( recycler2 );


      const roler = new A3RolerConveyer( .5, 2, 10 );
      pos.set( 3, .5, 0 );
      roler.setPosition( pos );
      roler.speed = 2;
      a3.addActor( roler );

      // 拍照功能测试
      const gui = a3.gui;

      const width = 300 * window.devicePixelRatio;
      const height = 200 * window.devicePixelRatio;

      const camera = new THREE.PerspectiveCamera(
        45, 1, 
        0.1, 2000
      );

      camera.position.set( 0, 30, 0 );
      camera.lookAt( 0, 0, 0 );

      
      const param = {
        "Stop":()=>{
          roler.speed = 0;
        },
        "Start":()=>{
          roler.speed = 1;
        },
        "Recorder":()=>{
          // for( var i = 0; i < 10; i ++ ){
            const renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( width, height );
            renderer.shadowMap.enabled = true;
            a3.addRenderer( renderer, camera );

            const recWin = window.open(
              "", "录像",
              `width=${width}, height=${height}`
            );

            recWin.onunload = ()=>{
              a3.removeRenderer( renderer );
              renderer.dispose();
            }

            recWin.onresize = ()=>{
              camera.aspect = recWin.innerWidth / recWin.innerHeight;
              renderer.setSize( recWin.innerWidth - 20, recWin.innerHeight - 20 );
            }
            
            recWin.document.body.appendChild(renderer.domElement);
          // }
        },
        "ScreenShot":()=>{
          console.log("屏幕截图", window.devicePixelRatio);

          const img = a3.getImage( camera, width, height );
          console.log( img )
          
          // div.src = img;
          const imgWin = window.open(
            "", "屏幕截图",
            `width=${width * window.devicePixelRatio + 10}, height=${height * window.devicePixelRatio}`);
          console.log(imgWin)
          imgWin.document.title = "屏幕截图";
          imgWin.document.body.appendChild(img);

          // 图像数据
          const data = a3.getImageData( camera, width, height );
          data.toBlob( (blob)=>{
            // console.log(blob)
            const url = URL.createObjectURL(blob);
            var newImg = imgWin.document.createElement("img");
            newImg.src = url;
            // imgWin.document.body.appendChild(newImg);
            newImg.onload = ()=>{
              // console.log("load");
              const canvas = imgWin.document.createElement("canvas");
              canvas.width = width * window.devicePixelRatio;
              canvas.height = height * window.devicePixelRatio;
              const ctx = canvas.getContext("2d");
              ctx.drawImage( newImg, 0, 0 );

              const imgData = ctx.getImageData( 0, 0, canvas.width, canvas.height );
              
              for( var i = 0, il = imgData.data.length; i < il; i += 4 ) {
                // imgData.data[i] = 0;
                // imgData.data[i+1] = 0;
                imgData.data[i+2] = 0;
              }

              ctx.putImageData(imgData, 0, 0 );

              imgWin.document.body.appendChild(canvas);
            }

          })

        }
      }

      gui.add( param, "ScreenShot" ).name("截图");
      gui.add( param, "Recorder" ).name("录像");
      gui.add( param, "Start" ).name("启动");
      gui.add( param, "Stop" ).name("停止");

      // const conveyerGeometry = new ExCylinderGeometry( .5, 1, 3 );
      // const conveyerMesh = new THREE.Mesh( conveyerGeometry, 
      //   new THREE.MeshPhongMaterial({
      //     color:0x1982cc,
      //     // side: THREE.DoubleSide,
      //     // wireframe: true,
      //   }) );
      // const conveyer = new A3Actor();
      // // conveyer.threeObject = conveyerMesh;
      // conveyer.setFromMesh( conveyerMesh , 1);
      // pos.set( 0, 1.5, 0 );
      // quat.setFromAxisAngle( new THREE.Vector3( 0, 0, 1 ), Math.PI / 2 );
      // conveyer.setPosition(pos);
      // conveyer.setQuaternion( quat );
      // a3.addActor( conveyer );

      // const vnh = new VertexNormalsHelper( conveyerMesh, 1 );
			// a3.scene.add( vnh );
      const clock = new THREE.Clock();

      a3.start();
      animate();

      function animate() {

        requestAnimationFrame( animate );
        const dt = clock.getDelta();
        // createBox( dt );
        // if( vnh ) vnh.update();
      }

    </script>
  </body>
</html>